<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>用户中心</title>
	<!--[if IE]>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<![endif]-->
	<!-- Main Stylesheet --> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" type="text/css" />
	<!-- Your Custom Stylesheet --> 
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/custom.css" type="text/css" />
	<link href="<%=request.getContextPath()%>/lib/thickbox/thickbox.css" rel="stylesheet" type="text/css" />
	<style>
		#moreInfoForm select{width:150px;margin-right: 10px;}
		.no-style tr td:first-child{text-align:right;}
		 .input_td{width:200px;}
	</style>
	<%@include file="/include/header.jsp" %>
	<script src="<%=request.getContextPath()%>/lib/jquery/jquery-1.4.2.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/administry.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/lib/jquery/jquery.ui.core.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/lib/jquery/jquery.ui.widget.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/lib/jquery/jquery.ui.tabs.min.js"></script>
	<script src="<%=request.getContextPath()%>/lib/validator/formValidator_min.js"></script>
	<script src="<%=request.getContextPath()%>/lib/validator/formValidatorRegex.js"></script>
	<script src="<%=request.getContextPath()%>/lib/jquery/jquery.form.js"></script>
	<script src="<%=request.getContextPath()%>/lib/thickbox/thickbox.js"></script>
	<script src="<%=request.getContextPath()%>/js/function.js"></script>
	<script src="<%=request.getContextPath()%>/js/common/region.js"></script>
	<script type="text/javascript">
	function fillSelect(el, opts, clear){
		if(clear){el.options.length = 0;}
		for(var p in opts){
			var option = new Option(p, p);
			el.options.add(option);
		}
		if(el.options.length == 0){
			el.options.add(new Option("-- 请选择 --", ""));
			$(el).attr("disabled", "disabled");
		}else{
			$(el).removeAttr("disabled");
		}
	}
	function selectedDefault(elId){
		var el = $("#"+elId)[0];
		var dftv = $(el).attr("default") || '';
		var opts = el.options;
		var selectedIndex = 0;
		for(var i=0; i<opts.length; i++){
			var v = opts[i].value;
			if(v == dftv){
				selectedIndex = i;
			}
		}
		el.selectedIndex = selectedIndex;
	}
	function changeProvince(provinceId, cityId){
		var pel = $("#"+provinceId)[0];
		var province = pel.options[pel.selectedIndex].value;
		var city = [];
		if(province != ''){
			city = region[province];
		}
		fillSelect($("#"+cityId)[0], city, true);
		changeCity(provinceId, cityId, "moreinfo_county");
	}
	function changeCity(provinceId, cityId, countyId){
		var pel = $("#"+provinceId)[0];
		var cel = $("#"+cityId)[0];
		var province = pel.options[pel.selectedIndex].value;
		var city = cel.options[cel.selectedIndex].value;
		var county = [];
		if(city != ''){
			county = region[province][city];
		}
		fillSelect($("#"+countyId)[0], county, true);
	}
	$(document).ready(function(){
		Administry.contextBoxInit();
		$("#nav").tabs(1);
		
		<s:if test="allowPut">
		//密码修改表单
		$.formValidator.initConfig({
  			validatorGroup: "3",
  			theme:"126",
			formID:"changepwd",
			submitOnce:true,
			onError:function(msg){
				showTip(msg);
			},
			onSuccess:function(){
				if( confirm("准备提交数据，是否继续？") ){
					Mask.show();
					$('#changepwd').ajaxSubmit(Ajax.callback);
				}
				return false;
			}
		});
		$("#oldpwd").formValidator({
  			validatorGroup: "3",
			onShow:"请输入当前密码",
			onCorrect:"恭喜您,输入正确",
			onFocus:"请输入当前密码，2-16个字符"
		}).inputValidator({min:2,max:16});
		$("#newpwd").formValidator({
  			validatorGroup: "3",
			onShow:"请输入新密码",
			onCorrect:"恭喜您,输入正确",
			onFocus:"请输入新密码，2-16个字符"
		}).inputValidator({min:5,max:16}).passwordValidator({continueChar:false,sameChar:false});
		$("#repeatpwd").formValidator({
  			validatorGroup: "3",
			onShow:"请再次输入新密码",
			onCorrect:"恭喜您,输入正确",
			onFocus:"请再次输入新密码，2-16个字符"
		}).compareValidator({desID:"newpwd", onError:"两次密码输入不一致"});
		//基本资料修改表单
		$.formValidator.initConfig({
  			validatorGroup: "1",
			formID:"basicInfoForm",
			submitOnce:true,
			onError:function(msg){
				showTip(msg);
			},
			onSuccess:function(){
				Mask.show();
				return true;
			}
		});
		$("#nickname").formValidator({
  			validatorGroup: "1",
			onShow:"昵称",
			onFocus:"有一个昵称，让自己更加有个性",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).inputValidator({min:0,max:30});
		$("#truename").formValidator({
  			validatorGroup: "1",
			onShow:"真实姓名",
			onFocus:"只能输入中文或英文哦",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).inputValidator({min:0,max:30}).regexValidator({dataType:"enum", regExp:'name'});
		$("#email").formValidator({
  			validatorGroup: "1",
			onShow:"电子邮箱",
			onFocus:"请输入正确的电子邮箱格式",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'email'});
		$("#age").formValidator({
  			validatorGroup: "1",
			onShow:"请输入的年龄（1-99岁之间）",          
			onFocus:"只能输入1-99之间的数字哦",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).inputValidator({
			min:1,
			max:99,
			type:'number', 
			onError:"年龄必须在1-99之间，请确认"
		});
		$(":radio[name='userInfo.gender']").formValidator({
  			validatorGroup: "1",
  			tipID: 'genderTip',
			onShow:"请选择您的性别",
			onCorrect:"您的选择将决定您另一半的性别"
		}).inputValidator({min:1});
		$(":radio[name='userInfo.bloodType']").formValidator({
  			validatorGroup: "1",
  			tipID: 'bloodTypeTip',
			onShow:"请选择您的血型",
			onCorrect:"血型会影响您的性格"
		}).inputValidator({min:1});
		
		//详细资料修改表单
		$.formValidator.initConfig({
  			validatorGroup: "2",
			formID:"moreInfoForm",
			submitOnce:true,
			onError:function(msg){
				showTip(msg);
			},
			onSuccess:function(){
				Mask.show();
				return true;
			}
		});
		$("#address").formValidator({
  			validatorGroup: "2",
			onShow:"您的住址",
			empty: true
		}).inputValidator({min:0,max:100});
		$("#cellphone").formValidator({
  			validatorGroup: "2",
			onShow:"手机号",
			onFocus:"手机号由11位数字组成",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'mobile'});
		$("#telephone").formValidator({
  			validatorGroup: "2",
			onShow:"固定电话号码",
			onFocus:"请输入正确的电话号码格式",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).regexValidator({dataType:"enum", regExp:'tel'});
		$("#birthday").formValidator({
  			validatorGroup: "2",
			onShow:"请输入的生日",    
			onFocus:"只需要输入月和日，格式：08-01",
			onCorrect:"恭喜您,输入正确",
			empty: true
		}).functionValidator({fun:isBirthday,onError:'输入格式不正确'});
		$(":radio[name='userInfo.birthdayType']").formValidator({
  			validatorGroup: "2",
  			tipID: 'birthdayTypeTip',
			onShow:"请选择您的生日类型"
		});
		$("#org").formValidator({
  			validatorGroup: "2",
			onShow:"公司、单位或团体组织",
			empty: true
		}).inputValidator({min:0,max:100});
		$("#department").formValidator({
  			validatorGroup: "2",
			onShow:"所在部门",
			empty: true
		}).inputValidator({min:0,max:30});
		$("#job").formValidator({
  			validatorGroup: "2",
			onShow:"您的职务",
			empty: true
		}).inputValidator({min:0,max:20});
		
		$("#modBasicInfo").bind("click", function(){
			$("#baseinfo_edit_area").show();
			$("#baseinfo_read_area").hide();
		});
		$("#modMoreInfo").bind("click", function(){
			selectedDefault("moreinfo_province");
			changeProvince("moreinfo_province", "moreinfo_city");
			selectedDefault("moreinfo_city");
			changeCity("moreinfo_province", "moreinfo_city", "moreinfo_county");
			selectedDefault("moreinfo_county");
			$("#moreinfo_edit_area").show();
			$("#moreinfo_read_area").hide();
		});
		//提交
		$("#submitBasicInfo").bind("click", function(){
			$("#basicInfoForm")[0].submit();
		});
		$("#submitMoreInfo").bind("click", function(){
			$("#moreInfoForm")[0].submit();
		});
		//取消
		$("#cancelBasicInfo").bind("click", function(){
			$("#baseinfo_edit_area").hide();
			$("#baseinfo_read_area").show();
		});
		$("#cancelMoreInfo").bind("click", function(){
			$("#moreinfo_edit_area").hide();
			$("#moreinfo_read_area").show();
		});
		fillSelect($("#moreinfo_province")[0], []);
		fillSelect($("#moreinfo_province")[0], region);
		</s:if>
		
	});
	</script>
</head>
<body>
	<%@include file="/include/body.jsp" %>
	
<!-- Wrapper -->
<div class="wrapper">
	<div id="nav">
		<ul>
			<li><a class="corner-tl"  href="#baseinfo">基本资料</a></li>
			<s:if test="allowPut">
				<li><a href="#moreinfo">详细资料</a></li>
		    	<li><a class="corner-tr"  href="#chgpwd">修改密码</a></li>
		    </s:if>
		    <s:else>
		    	<li><a class="corner-tr" href="#moreinfo">详细资料</a></li>
		    </s:else>
	    </ul>
	    
		<div id="baseinfo">
			<s:if test="allowPut">
			<div class="content-box" id="baseinfo_edit_area" style="display:none;">
				<form id="basicInfoForm" name="basicInfoForm" method="post" action="<%=request.getContextPath()%>//saveBasicInfoUserCenter.action">
				<input type="hidden" name="userInfo.id" value="<s:property value="userInfo.id"/>" />
				<input type="hidden" name="user.username" value="<s:property value="user.username"/>" />
				<input type="hidden" name="username" value="<s:property value="username"/>" />
				<header>
					<h3>基本资料</h3>
					<div>
						 <span>
				    		<a id="submitBasicInfo" class="btn" href="javascript:void(0)"><span class="icon icon-ok"></span>保存</a>
				    		<a id="cancelBasicInfo" class="btn" href="javascript:void(0)"><span class="icon icon-cancel"></span>取消</a>
				    	</span>
				    </div>
				</header>
				<section>
				<table class="no-style">
					<tr>
						<td>用户名：</td>
						<td><s:property value="user.username"/></td>
						<td></td>
					</tr>
					<tr>
						<td>昵称：</td>
						<td>
							<input id="nickname" name="user.nickname" type="text" value="<s:property value="user.nickname"/>"/>
						</td>
						<td><div id="nicknameTip"></div></td>
					</tr>
					<tr>
						<td>真实姓名：</td>
						<td>
							<input id="truename" name="user.truename" type="text" value="<s:property value="user.truename"/>"/>
						</td>
						<td><div id="truenameTip"></div></td>
					</tr>
					<tr>
						<td>性别：</td>
						<td>
							<s:radio name="userInfo.gender" list="#{'1':'男&nbsp;&nbsp;', '0':'女'}" theme="simple" 
							value="userInfo.gender"></s:radio>
						</td>
						<td><div id="genderTip"></div></td>
					</tr>
					<tr>
						<td>年龄：</td>
						<td>
							<input id="age" name="age" type="text" value="<s:property value="userInfo.age"/>"/>
						</td>
						<td><div id="ageTip"></div></td>
					</tr>
					<tr>
						<td>血型：</td>
						<td>
							<s:radio name="userInfo.bloodType"
							list="#{'0':'A型&nbsp;&nbsp;', '1':'B型&nbsp;&nbsp;', '2':'O型&nbsp;&nbsp;', '3':'AB型'}" theme="simple" 
							value="userInfo.bloodType"></s:radio>
						</td>
						<td><div id="bloodTypeTip"></div></td>
					</tr>
					<tr>
						<td>电子邮箱：</td>
						<td>
							<input id="email" name="user.email" type="text" value="<s:property value="user.email"/>"/>
						</td>
						<td><div id="emailTip"></div></td>
					</tr>
				</table>
				<div class="form-btn">
					<button class="btn" type="submit"><span class="icon icon-ok"></span>保存</button>
					<button class="btn" type="reset"><span class="icon icon-refresh"></span>重置</button>
				</div>
				</section>
				</form>
			</div>
			</s:if>
			<div class="content-box" id="baseinfo_read_area">
				<header>
					<h3>基本资料</h3>
					<s:if test="allowPut">
					<div>
						 <span>
				    		<a id="modBasicInfo" class="btn" href="javascript:void(0)"><span class="icon icon-edit"></span>修改</a>
				    	</span>
				    </div>
					</s:if>
				</header>
				<section>
				<table class="no-style">
					<tr>
						<td>用户名：</td>
						<td><s:property value="user.username"/></td>
					</tr>
					<tr>
						<td>昵称：</td>
						<td>
							<s:property value="user.nickname"/>
						</td>
					</tr>
					<tr>
						<td>真实姓名：</td>
						<td>
							<s:property value="user.truename"/>
						</td>
					</tr>
					<tr>
						<td>性别：</td>
						<td>
							<s:if test="userInfo.gender == 0">女</s:if>
							<s:elseif test="userInfo.gender == 1">男</s:elseif>
						</td>
					</tr>
					<tr>
						<td>年龄：</td>
						<td>
							<s:property value="userInfo.age"/>
						</td>
					</tr>
					<tr>
						<td>血型：</td>
						<td>
							<s:if test="userInfo.bloodType == 0">A型</s:if>
							<s:elseif test="userInfo.bloodType == 1">B型</s:elseif>
							<s:elseif test="userInfo.bloodType == 2">O型</s:elseif>
							<s:elseif test="userInfo.bloodType == 3">AB型</s:elseif>
						</td>
					</tr>
					<tr>
						<td>电子邮箱：</td>
						<td>
							<s:property value="user.email"/>
						</td>
					</tr>
				</table>
				</section>
			</div>
		</div>
		<div id="moreinfo">
			<div class="content-box" id="moreinfo_edit_area" style="display:none;">
				<form id="moreInfoForm" method="post" name="moreInfoForm" action="<%=request.getContextPath()%>//saveMoreInfoUserCenter.action">
				<input type="hidden" name="userInfo.id" value="<s:property value="userInfo.id"/>" />
				<input type="hidden" name="user.username" value="<s:property value="user.username"/>" />
				<input type="hidden" name="userInfo.country" value="中华人民共和国" />
				<input type="hidden" name="username" value="<s:property value="username"/>" />
				<header>
					<h3>详细资料</h3>
					<div>
						 <span>
				    		<a id="submitMoreInfo" class="btn" href="javascript:void(0)"><span class="icon icon-ok"></span>保存</a>
				    		<a id="cancelMoreInfo" class="btn" href="javascript:void(0)"><span class="icon icon-cancel"></span>取消</a>
				    	</span>
				    </div>
				</header>
				<section>
				<table class="no-style">
					<tr>
						<td>省：</td>
						<td colspan="2">
							<select id="moreinfo_province" name="userInfo.province" disabled="disabled"
								onchange="changeProvince('moreinfo_province', 'moreinfo_city');"
								default="<s:property value="userInfo.province"/>"></select>
							市：<select id="moreinfo_city" name="userInfo.city" disabled="disabled"
								onchange="changeCity('moreinfo_province', 'moreinfo_city', 'moreinfo_county');"
								default="<s:property value="userInfo.city"/>"></select>
							县/区：<select id="moreinfo_county" name="userInfo.county" disabled="disabled"
								default="<s:property value="userInfo.county"/>"></select>
						</td>
					</tr>
					<tr>
						<td>地址：</td>
						<td class="input_td">
							<input type="text" id="address" name="userInfo.address" value="<s:property value="userInfo.address"/>"/>
						</td>
						<td><div id="addressTip"></div></td>
					</tr>
					<tr>
						<td>手机：</td>
						<td class="input_td">
							<input type="text" id="cellphone" name="userInfo.cellphone" value="<s:property value="userInfo.cellphone"/>" />
						</td>
						<td><div id="cellphoneTip"></div></td>
					</tr>
					<tr>
						<td>电话：</td>
						<td class="input_td">
							<input type="text" id="telephone" name="userInfo.telephone" value="<s:property value="userInfo.telephone"/>" />
						</td>
						<td><div id="telephoneTip"></div></td>
					</tr>
					<tr>
						<td>生日：</td>
						<td class="input_td">
							<input type="text" id="birthday" name="userInfo.birthday" value="<s:property value="userInfo.birthday"/>" />
						</td>
						<td><div id="birthdayTip"></div></td>
					</tr>
					<tr>
						<td>生日类型：</td>
						<td class="input_td">
							<s:radio id="birthdayType" name="userInfo.birthdayType" 
								list="#{'0':'公历生日&nbsp;&nbsp;','1':'农历生日'}" theme="simple" 
								value="userInfo.birthdayType"></s:radio>
						</td>
						<td><div id="birthdayTypeTip"></div></td>
					</tr>
					<tr>
						<td>公司/单位/组织：</td>
						<td class="input_td">
							<input type="text" id="org" name="userInfo.org" value="<s:property value="userInfo.org"/>" />
						</td>
						<td><div id="orgTip"></div></td>
					</tr>
					<tr>
						<td>部门：</td>
						<td class="input_td">
							<input type="text" id="department" name="userInfo.department" value="<s:property value="userInfo.department"/>" />
						</td>
						<td><div id="departmentTip"></div></td>
					</tr>
					<tr>
						<td>职务：</td>
						<td class="input_td">
							<input type="text" id="job" name="userInfo.job" value="<s:property value="userInfo.job"/>" />
						</td>
						<td><div id="jobTip"></div></td>
					</tr>
				</table>
				<div class="form-btn">
					<button class="btn" type="submit"><span class="icon icon-ok"></span>保存</button>
					<button class="btn" type="reset"><span class="icon icon-refresh"></span>重置</button>
				</div>
				</section>
				</form>
			</div>
			<div class="content-box" id="moreinfo_read_area">
				<header>
					<h3>详细资料</h3>
					<s:if test="allowPut">
					<div>
						 <span>
				    		<a id="modMoreInfo" class="btn" href="javascript:void(0)"><span class="icon icon-edit"></span>修改</a>
				    	</span>
				    </div>
					</s:if>
				</header>
				<section>
				<table class="no-style">
					<tr>
						<td>省：</td>
						<td><s:property value="userInfo.province"/>
						市：<s:property value="userInfo.city"/>
						县/区：<s:property value="userInfo.county"/>
						</td>
					</tr>
					<tr>
						<td>地址：</td>
						<td>
							<s:property value="userInfo.address"/>
						</td>
					</tr>
					<tr>
						<td>手机：</td>
						<td>
							<s:property value="userInfo.cellphone"/>
						</td>
					</tr>
					<tr>
						<td>电话：</td>
						<td>
							<s:property value="userInfo.telephone"/>
						</td>
					</tr>
					<tr>
						<td>生日：</td>
						<td><s:property value="userInfo.birthday"/></td>
					</tr>
					<tr>
						<td>生日类型：</td>
						<td>
							<s:if test="userInfo.birthdayType == 0">公历生日</s:if>
							<s:elseif test="userInfo.birthdayType == 1">农历生日</s:elseif>
						</td>
					</tr>
					<tr>
						<td>公司/单位/组织：</td>
						<td colspan="5"><s:property value="userInfo.org"/></td>
					</tr>
					<tr>
						<td>部门：</td>
						<td>
							<s:property value="userInfo.department"/>
						</td>
					</tr>
					<tr>
						<td>职务：</td>
						<td>
							<s:property value="userInfo.job"/>
						</td>
					</tr>
				</table>
				</section>
			</div>
		</div>
		<s:if test="allowPut">
		<div id="chgpwd">
			<div class="content-box" id="modpwd_area">
		    	<header>
					<h3>修改密码</h3>
				</header>
				<!-- Left column/section -->
				<section>
					<div class="box box-info">带*为必填项</div>
					<form id="changepwd" name="changepwd" onsubmit="return false;" action="<%=request.getContextPath()%>/protected/system/userConfig_changePassword.action" method="post">
					<table class="no-style">
						<tr>
							<td><label class="required">密码：</label></td>
							<td><input id="oldpwd" type="password" name="oldpwd" value=""/></td>
							<td><div id="oldpwdTip"></div></td>
						</tr>
						<tr>
							<td><label class="required">新密码：</label></td>
							<td><input id="newpwd" type="password" name="newpwd" value=""/></td>
							<td><div id="newpwdTip"></div></td>
						</tr>
						<tr>
							<td><label class="required">再次输入新密码：</label></td>
							<td><input id="repeatpwd" type="password" name="_repeatpwd" value=""/></td>
							<td><div id="repeatpwdTip"></div></td>
						</tr>
					</table>
					<p><button type="submit" class="btn btn-green big"><span class="icon icon-ok"></span>提交</button></p>
					</form>
				</section>
			</div>
		</div>
		</s:if>
	</div>
</div>

</body>
</html>